<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn-PixiJS 文字</title>
</head>
<body>

<script src="js/pixi.min.js"></script>

<script>
  const app = new PIXI.Application({
    width: 800, height: 600,
    backgroundColor: 0x1099bb,
//    transparent: true,
    resolution: window.devicePixelRatio || 1,
  });
  document.body.appendChild(app.view);

  const container = new PIXI.Container();

  app.stage.addChild(container);


  const basicText = new PIXI.Text('Basic text in pixi');
  basicText.x = 0;
  basicText.y = 0;

  app.stage.addChild(basicText);


  const style = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 36,
    fontStyle: 'italic',
    fontWeight: 'bold',
    fill: ['#ffffff', '#00ff99'], // gradient
    stroke: '#4a1850',
    strokeThickness: 5,
    dropShadow: true,
    dropShadowColor: '#000000',
    dropShadowBlur: 4,
    dropShadowAngle: Math.PI / 6,
    dropShadowDistance: 6,
    wordWrap: true,
    wordWrapWidth: 440,
  });

  const richText = new PIXI.Text('Rich text with a lot of options and across multiple lines', style);
  richText.x = 50;
  richText.y = 250;

  app.stage.addChild(richText);

</script>
</body>
</html>